<template>
  <div id="activity-list">
    <h1>活动列表</h1>
    <el-table :data="activities" style="width: 280%">
      <el-table-column prop="id" label="活动ID"></el-table-column>
      <el-table-column prop="name" label="活动名称"></el-table-column>
      <el-table-column prop="time" label="活动时间"></el-table-column>
      <el-table-column prop="location" label="活动地点"></el-table-column>
      <el-table-column prop="description" label="活动描述"></el-table-column>
      <el-table-column label="活动图片">
        <template slot-scope="scope">
          <img :src="getImageUrl(scope.row.imageUrl)" alt="活动图片" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { fetchActivities } from '../api/api';
export default {
  name: 'activitylist',
  data() {
    return {
      activities: [] // 用于存储活动列表的数据
    };
  },
  created() {
    this.fetchActivities(); // 在组件创建时获取活动列表数据
  },
  methods: {
    fetchActivities() {
      fetchActivities()
        .then(response => {
          this.activities = response.data;
          console.log(response.data)
        })
        .catch(error => {
          console.log(error);
        });
    },
    getImageUrl(imageUrl) {
      return `${imageUrl}`;
    }

  }
};
</script>

<style scoped>
#activity-list {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

el-table {
  width: 100%;
  border-collapse: collapse;
}

el-table th,
el-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

el-table th {
  background-color: #f2f2f2;
}

el-table tr:hover {
  background-color: #f5f5f5;
}

img {
  width: 100px;
  height: 100px;
}
</style>
